<!--户型图-->
<template>
  <div>
    <div class="apartment" v-if="roomType==1">
      <!--户型图头部-->
      <div class="apartment-header">
        <div class="apartment-header-title">户型图查看</div>
        <div class="search">
          <div class="search-input">
            <el-autocomplete
              v-model="buildingName"
              :fetch-suggestions="getBuilding"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </div>
          <div class="search-bt">
            <el-button type="primary" @click="searchList">搜索</el-button>
          </div>
        </div>
      </div>
      <!--户型图图文列表-->
      <div class="apartment-center">
        <div
          class="apartment-list"
          v-for="item in premises"
          :key="item.buildingId"
          @click="handleSelect(item,1)"
        >
          <div class="apartment-list-img">
            <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
          </div>
          <div class="apartment-list-title">{{item.buildingName}}</div>
        </div>
      </div>
      <div v-show="apartmentNum>=1" class="hxtpagination">
        <el-pagination
          @size-change="(val) => {query.size=val;getBuildingPic()}"
          @current-change="(val) => {query.page=val;getBuildingPic()}"
          style="text-align:center"
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.size"
          :current-page.sync="query.page"
          layout="total, prev, pager, next"
          :total="apartmentNum"
        ></el-pagination>
      </div>
    </div>
    <div class="apartment" v-if="roomType==2">
      <div class="apartment-header">
        <div
          class="apartment-header-title"
          style="color: #409EFF;cursor: pointer;"
          @click="roomType=1"
        >返回楼盘信息</div>
      </div>
      <div class="apartment-center">
        <div class="apartment-list" v-for="(item,index) in buildPicList" :key="index">
          <div class="apartment-list-img">
            <viewer>
              <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
            </viewer>
          </div>
          <div class="apartment-list-title">{{item.imgName}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as otherAPI from "@/api/others";
import * as houseAPI from "@/api/house";
export default {
  name: "Apartment",
  data() {
    return {
      buildingName: "",
      buildingList: [],
      premises: [],
      roomType: 1,
      buildPicList: [],
      buildItem: null,
      apartmentNum: 0,
      query: {
        page: 1,
        size: 10
      }
    };
  },
  created() {
    this.getBuildingPic();
  },
  methods: {
    searchList() {
      if (!this.buildItem) {
        this.$message.warning("请输入楼盘信息");
        return;
      }
      this.buildingPic(this.buildItem.id);
    },
    // 户型图查看楼盘列表
    getBuildingPic() {
      var $this = this;
      otherAPI.getBuildingPic(this.query).then(res => {
        // console.log(res.data.rows)
        $this.apartmentNum = res.data.total;
        // this.premises = res.data.row;
        $this.premises = [];
        res.data.rows.forEach(function(item) {
          $this.premises.push(item);
        });
      });
    },
    // 获取楼盘列表
    getBuilding(keyword, cb) {
      this.buildingList = [];
      houseAPI
        .getBuiListByKeyword({
          keyword: keyword
        })
        .then(response => {
          if (response.data != undefined) {
            response.data.forEach(element => {
              this.buildingList.push({
                id: element.id,
                value: element.buildingName
              });
            });
          } else {
            this.$message({
              type: "warning",
              message: "打字太快啦"
            });
          }
          cb(this.buildingList);
        })
        .catch(err => {
          console.log("获取楼盘列表====>", err);
        });
    },
    // 楼盘选择
    handleSelect(item, type) {
      if (type) {
        //console.log(item,'==列表来的==')
        this.buildingPic(item.buildingId);
      } else {
        //console.log(item,'==模糊来的==')
        this.buildItem = item;
        this.buildingPic(item.id);
      }
    },
    //户型图查看
    buildingPic(id) {
      this.buildPicList = [];
      otherAPI
        .buildingPic({
          buildingId: id
        })
        .then(res => {
          this.buildPicList = res.data;
          this.buildPicList.forEach((element, ind) => {
            const index = element.imgName.indexOf(".");
            element.imgName = element.imgName.slice(0, index);
          });
          this.roomType = 2;
          console.log(res, "=====户型图列表====");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.apartment {
  padding: 25px;
  height: auto;
}
/*户型图头部搜索样式*/

.apartment-header {
  display: flex;
  padding: 30px 45px 10px 45px;
  background: #ffffff;
  position: relative;
}

.apartment-header-title {
  color: #778ca2;
  font-size: 12px;
  padding-top: 15px;
}

.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 30px;
  right: 45px;
}

.search-bt {
  margin-left: 15px;
}
/*户型图图文列表样式*/

.apartment-center {
  /* max-height: 500px; */
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  padding: 30px 10px 30px 40px;
  background: #ffffff;
}

.apartment-list {
  width: 256px;
  border-radius: 10px;
  background: #ffffff;
  margin-right: 15px;
  margin-bottom: 35px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}

.apartment-list-img > img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 170px;
}

.apartment-list-title {
  color: #333333;
  font-size: 12px;
  padding: 10px 15px;
}
.hxtpagination {
  width: 100%;
  padding-bottom: 30px;
  background: #fff;
}
</style>
